<template>
  <div class="wh100">
    <el-card v-for="(compType, key, index) in compList"
             :key="key"
             :class="{
                 mt10: index > 0
               }">
      <div class="clearFix" slot="header">
        <i :class="compType.icon"></i> {{compType.title}}
      </div>
      <div class="w100">
        <el-button v-for="(comp, _key, _index) in compType.comps"
                   :key="_index"
                   :class="{
                        ml10: _index % 2 != 0,
                        mt10: _index >= 2
                     }"
                   class="compItem"
                   draggable
                   :data-type="comp.type"
                   :data-name="_key">
          <h3>{{comp.title}}</h3>
          <p class="mt5">{{comp.desc}}</p>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import CompMixins from "@/mixins/CompMixins";

  export default {
    name: "CompPanel",
    mixins: [CompMixins],
  }
</script>

<style scoped lang="scss">
  /* 在sass中 /deep/需要换成::v-deep */
  ::v-deep .el-card__body {
    padding: 10px;
    width: calc(100% - 20px)
  }

  .compItem {
    width: calc((100% - 10px) / 2);
  }

  ::v-deep .el-card.is-always-shadow {
    box-shadow: 0 2px 5px 0px rgb(0 0 0 / 10%);
  }
</style>